<!--
*@Author: QWP
*@Description: 附件预览
*@Date: 2024-08-22 21:58:33
-->
<template>
  <a-layout class="f-h-100" style="background: #f0f2f7">
    <u-table-header class="f-h-auto f-table-tool f-padding-12"
      style="border-bottom: 1px solid #bcc0cb"
      v-if="!path">
      <u-icon-button itype="close" @click="closePage">关闭</u-icon-button>
    </u-table-header>
    <u-table-content class="f-padding-12 appendix-container">
      <iframe :src="setPath()" width="100%" height="100%" style="border: none;"></iframe>
    </u-table-content>
  </a-layout>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, useAttrs } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { fileApi } from '@/http/api';
import { nullC } from '@/util/common';
import { Base64 } from 'js-base64'
const route = useRoute();  
const fileFullPath = ref<string>('')

const attrs = useAttrs()
const emits = defineEmits(['echoClose'])

const props = withDefaults(
  defineProps<{
    path: string
  }>(),
  {
    path: ''
  }
)

onMounted(() => {
  setPath()
})

const setPath = () => {
  if(props.path) {
    return fileApi + '/onlinePreview?url=' + Base64.encode(props.path);
  } else {
    return fileApi + '/onlinePreview?url=' + Base64.encode(route.query.fileName);
  }
}

// 关闭当前页面
const closePage = () => {
  emits('echoClose')
  window.close();
}

watch(() => attrs.open, (nval, oval) => {
  if(nval == true) {
    setPath()
  }
}, { immediate: true })

</script>

<style lang='scss' scoped>
.u-file-echo-tree {
  > div {
    padding: 0 !important;
  }

  .el-tree-node__content {
    padding: 0 12px !important;

    .el-tree-node__expand-icon {
      display: none;
    }
  }
}

.appendix-container {
  position: relative;

  .appendix-left,
  .appendix-right {
    position: absolute;
    height: 100%;
    width: 100px;
    font-size: 50px;
    text-align: center;
    transition: all .5s linear;
    opacity: 0;

    i {
      position: absolute;
      display: inline-block;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .appendix-left:hover,
  .appendix-right:hover {
    background: #000;
    opacity: .1;
    color: #fff;
    cursor: pointer;
  }


  .appendix-left {
    left: 0;
  }

  .appendix-right {
    right: 0;
  }
}
</style>